<html>
<head>
    <style>
      body {
        background: black;
      }

      .btn {
        width: 100%;
        height: 100%;
        border: none;
        text-align: center;
        background-size: 100% 100%;
        background-color: transparent;
      }

        .btn:hover {
            background-color: rgba(0, 0, 0, 0.3);
        }

      td {
        text-align: center;
      }

      * {
        -webkit-user-select: none;
        -webkit-user-drag: none;
      }

      #BAR {
        background: rgba(255, 255, 255, 0.7);
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: 0;
        text-align: center;
        height: 8vh;
        width: 50%;
        border-radius: 10px;
        backdrop-filter: blur(2px);
        transform: translateX(-50%);
      }
    </style>
    <title>图片查看</title>
</head>
<body style="overflow: hidden;">
<img id='IMG' style="position: absolute; z-index: 1" src="">
<div id='DRAG' style="position: absolute; z-index: 2; width: 100%; height: 100%;"></div>
<div id='BAR'>
    <table style="width: 100%; height: 100%;">
        <tr>
            <!-- Template <td><button class='btn' style='background-image: url(data:image/svg+xml;base64,"></button></td> -->
            <!-- toggle -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
            <!-- Rotate Left -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
            <!-- Rotate Right -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
            <!-- Zoom In -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
            <!-- Zoom Out -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
            <!-- Download -->
            <td>
                <button class='btn'
                        style='background-image: url();'></button>
            </td>
        </tr>
    </table>
</div>
<a style="display: none" id='download' download href=""></a>
</body>
<script>
    const body = document.body
    const IMG = document.getElementById('IMG')
    const DRAG = document.getElementById('DRAG')
    const BAR = document.getElementById('BAR')
    const DOWNLOAD = document.getElementById('download')
    const url = decodeURIComponent(new RegExp('\\?url=(.*)').exec(window.parent.location.href)[1]).trim()
    IMG.src = url
    DOWNLOAD.href = url

    var centerX = -1	// to center, with % instead
    var centerY = -1
    var rotate = 0	// degree
    var zoom = 1

    var toggle = false

    function deployLT() {
        if (centerX < 0 || centerY < 0) {
            centerX = 50
            centerY = 50
        }
        var cX = centerX * body.clientWidth / 100
        var hX = IMG.offsetWidth / 2
        var cY = centerY * body.clientHeight / 100
        var hY = IMG.offsetHeight / 2
        IMG.style.left = cX - hX
        IMG.style.right = cX + hX
        IMG.style.top = cY - hY
        IMG.style.bottom = cY + hY
    }

    function adapt(relative = null) {
        var absX, absY

        centerX = 50
        centerY = 50

        if (relative) {
            // force adjust
            if (body.clientWidth - IMG.offsetWidth > body.clientHeight - IMG.offsetHeight) {
                // use height
                var ratio = IMG.offsetWidth / IMG.offsetHeight
                IMG.style.height = body.clientHeight
                IMG.style.width = IMG.offsetHeight * ratio
            }
            else {
                var ratio = IMG.offsetHeight / IMG.offsetWidth
                IMG.style.width = body.clientWidth
                IMG.style.height = IMG.offsetWidth * ratio
            }
        }
        else if (relative == false) {
            // force adjust
            IMG.style.width = IMG.naturalWidth
            IMG.style.height = IMG.naturalHeight
        }
        const w = IMG.offsetWidth, h = IMG.offsetHheight
        deployLT()
    }

    // Drag support
    var starT, starTLT
    DRAG.onmousedown = function (ev) {
        var e = ev || window.event
        starT = [e.clientX, e.clientY]
        starTLT = [IMG.offsetLeft, IMG.offsetTop]
    }
    DRAG.onmousemove = function (ev) {
        var e = ev || window.event

        if (starT == null) return

        if (centerX < 0 || centerY < 0) {
            centerX = 50
            centerY = 50
        }

        IMG.style.left = e.clientX - starT[0] + starTLT[0]
        IMG.style.top = e.clientY - starT[1] + starTLT[1]

        centerX = (IMG.offsetRight - IMG.offsetLeft) * 50 / body.clientWidth
        centerY = (IMG.offsetBottom - IMG.offsetTop) * 50 / body.clientHeight
    }


    DRAG.onmouseup = function (ev) {
        starT = null
    }

    // deploy buttons

    function mkTransform(rotate, zoom) {
        return 'rotate(' + rotate + 'deg) scale(' + zoom + ',' + zoom + ')'
    }

    var btnactions = [
        function () {
            // toggle
            toggle = !toggle
            zoom = 1
            IMG.style.transform = mkTransform(rotate, zoom)
            adapt(toggle)
        }, function () {
            rotate -= 90
            if (!rotate % 360) rotate = 0
            IMG.style.transform = mkTransform(rotate, zoom)
        }, function () {
            rotate += 90
            if (!rotate % 360) rotate = 0
            IMG.style.transform = mkTransform(rotate, zoom)
        }, function () {
            // zoom in
            zoom += 0.2
            IMG.style.transform = mkTransform(rotate, zoom)
        }, function () {
            if (zoom < 0.3) return
            zoom -= 0.2
            IMG.style.transform = mkTransform(rotate, zoom)
        }, function () {
            // Download!
            DOWNLOAD.dispatchEvent(new MouseEvent('click'))
        },
    ]

    var btns = document.getElementsByTagName('button')
    for (var i in btns) {
        btns[i].onclick = btnactions[i]
    }

    IMG.onload = btnactions[0]

    DRAG.onwheel = e => {
        if (e.wheelDeltaY > 0) {
            btnactions[3]()
        }
        else if (e.wheelDeltaY < 0) {
            btnactions[4]()
        }
    }

    document.addEventListener('keydown', (e) => {
        if (e.repeat) return
        if (e.key === 'w' && e.ctrlKey === true || e.key === 'Escape') {
            window.close()
        }
    })
</script>
</html>
